<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{title}}</title>
  <link rel="stylesheet" href="/public/css/style.css">
</head>
<body>

  <div class="container">

    <h1 class="heading">{{title}}</h1>

    <form class="tools" autocomplete="off">
      <div class="condition">
        <input type="hidden" name="page" value="1">
        <input type="hidden" name="id">
        <button type="button" class="btn batch">批量删除</button>
        <input name="keyword" type="search" class="input" placeholder="请输入名称/单价" value="{{keyword}}">
        <button class="btn">搜索</button>
      </div>
      <a href="/add" class="btn">新增</a>
    </form>
  
    <table class="table stripe">
      <thead>
        <tr>
          <th class="center" width="80"><input type="checkbox" id="checkall"></th>
          <th width="80">序号</th>
          <th width="100">缩图</th>
          <th>名称</th>
          <th width="100">单价</th>
          <th width="120">日期</th>
          <th width="140">操作</th>
        </tr>
      </thead>
      <tbody>
        {% for item in fruit %}
        <tr>
          <td class="center"><input type="checkbox" name="id" value="{{item.id}}"></td>
          <td>{{ item.id }}</td>
          <td><img src="{{ item.thumb }}" width="50"></td>
          <td>{{ item.name }}</td>
          <td class="right"> <em>{{ item.price | CNY}}</em></td>
          <td>{{ item.createAt | date }}</td>
          <td class="action">
            <a href="/edit?id={{item.id}}&page={{page}}&keyword={{keyword}}" class="btn">修改</a>
            <a href="/delete?id={{item.id}}&page={{page}}&keyword={{keyword}}" class="btn del">移除</a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="999" class="center">没有找到数据！</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  
    {% if pagecount>=1 %}
    <form class="pager">
      <input type="hidden" name="keyword" value="{{keyword}}">
      {% if page!==1 %}
      <a href="?page={{page-1}}&keyword={{keyword}}">上页</a>
      {% endif %}

      {% for p in range(1, pagecount+1) %}
      <a href="?page={{p}}&keyword={{keyword}}" class="{{ 'active' if p==page else '' }}">{{p}}</a>
      {% endfor %}

      {% if page!==pagecount %}
      <a href="?page={{page+1}}&keyword={{keyword}}">下页</a>
      {% endif %}
      <select name="perpage" class="btn" onchange="this.parentNode.submit()">
        <option value="2" {{'selected' if perpage==2 else ''}}>每页 2 条</option>
        <option value="3" {{'selected' if perpage==3 else ''}}>每页 3 条</option>
        <option value="4" {{'selected' if perpage==4 else ''}}>每页 4 条</option>
        <option value="5" {{'selected' if perpage==5 else ''}}>每页 5 条</option>
      </select>
    </form>
    {% endif %}

  </div>

  <script>
  checkall.onchange = function(){
    document.querySelectorAll('tbody [name="id"]').forEach(input => {
      input.checked = this.checked;
    },this)
  }

  document.querySelector('.btn.batch').onclick = function(){
    let form =  this.closest('form');
    let checkboxs = document.querySelectorAll('tbody [name="id"]:checked');
    if(!checkboxs || !checkboxs.length){
      alert('请至少选择一项！');
      return false;
    }
    let ids = [...checkboxs].map(input=>input.value).join('_');
    if(confirm('您确定要删除所选项吗？')){
      form.action='/delete';
      document.querySelector('.condition [name="id"]').value = ids;
      form.submit();
    }else{
      document.querySelector('#checkall').checked = false;
      checkboxs.forEach(input=>input.checked=false);
    }

  }

  document.querySelectorAll('.btn.del').forEach(btn => {
    btn.onclick = function(event){
      if(!confirm('您确定要删除此项吗？')) event.preventDefault();
    }
  })
  </script>

</body>
</html>